<template>
  <div>
    <div class="header">
      <el-col :span="4" :push="1">
        <el-select v-model="states" value-key="states" @change="changeState" style="margin-top: 10px;width:78%" placeholder="请选择分类">
          <el-option v-for="item in option" :key="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" :push="2">
        <el-input style="margin-top:10px" v-model="search" @change="searchPage"
                  oninput="value=value.replace(/\s*/g, '')" placeholder="问题全文检索" suffix-icon="el-icon-search"></el-input>
      </el-col>
      <el-col :span="2" :push="3">
        <el-button icon="el-icon-refresh" style="margin-top:10px" @click="reset">重置</el-button>
      </el-col>
      <el-col :span="2" :push="4">
        <el-button icon="el-icon-circle-plus" style="margin-top:10px" @click="clear">新建</el-button>
      </el-col>
    </div>
    <el-table :data="tableData" style="width:100%">
      <el-table-column prop="bankId" type="selection"></el-table-column>
      <el-table-column prop="bankTrouble" label="问题"></el-table-column>
      <el-table-column prop="bankClass" label="分类"></el-table-column>
      <el-table-column prop="bankState" label="状态"></el-table-column>
      <el-table-column prop="bankTime" label="次数">
        <template slot-scope="s">
          {{s.row.bankTime | formatTime}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="s">
          <i class="el-icon-edit" title="修改" style="font-size:17px;cursor:pointer" @click="update(s.row.bankId)"></i>
          <i class="el-icon-delete" title="删除" style="font-size:17px;cursor:pointer" @click="del(s.row.bankId)"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="问答库" :visible.sync="dialogFormVisible" width="65%">
      <el-form :model="warehouse" :rules="rules" ref="warehouse" label-position="right" label-width="80px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="问题" prop="bankTrouble">
              <el-input v-model="warehouse.bankTrouble" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 60px">
          <el-col :span="22">
            <el-form-item label="解答">
              <quill-editor class="editor"
                            ref="myTextEditor"
                            v-model="content"
                            :options="editorOption"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @ready="onEditorReady($event)"
                            @change="onEditorChange($event)">
              </quill-editor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="内部提示">
              <el-input
                type="textarea"
                :rows="2"
                autosize
                v-model="warehouse.bankTips">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="作者">
              <el-input style="width: 100%" v-model="warehouse.empByEmployeesId.empName" :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="2">
            <el-form-item label="创建日期">
              <el-date-picker
                v-model="warehouse.bankDate"
                align="right"
                type="datetime"
                style="width: 100%"
                :disabled="true">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="分类">
              <el-radio-group v-model="warehouse.bankClass">
                <el-radio label="A"></el-radio>
                <el-radio label="B"></el-radio>
                <el-radio label="C"></el-radio>
                <el-radio label="D"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="2">
            <el-form-item label="状态">
              <el-select v-model="warehouse.bankState" style="width: 100%" placeholder="请选择状态">
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2" :push="20">
            <el-button @click="addBank('warehouse')" icon="el-icon-check">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 分页 -->
    <div class="limit">
      <el-pagination
        :current-page.sync="currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @current-change="changePage"
        @size-change="sizeChange">
      </el-pagination>
      <p></p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Asarsenal",
    data: function () {
      return {
        tableData: [],
        warehouse:{
          bankId:'',
          bankTrouble:'',
          bankAnswer:'',
          bankTips:'',
          bankDate:'',
          bankClass:'',
          bankState:'',
          bankTime:'',
          empByEmployeesId:{
            employeesId:'',
            empName:''
          }
        },
        states:'',        //下拉框
        search:'',        //按条件查询
        user: {},         //当前登录用户信息
        //分页
        currPage: 1,     //当前页
        totalSize: 0,    //总条数
        pageSize: 5,     //页大小
        dialogFormVisible: false,
        content: null,
        editorOption: {
          modules: {
            toolbar: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
              ["blockquote", "code-block"], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
              [{ script: "sub" }, { script: "super" }], // 上标/下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              // [{'direction': 'rtl'}],                         // 文本方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ font: [] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ["clean"], // 清除文本格式
              ["link", "image", "video"] // 链接、图片、视频
            ], //工具菜单栏配置
          },
          placeholder: '请在这里添加解答描述', //提示
          readyOnly: false, //是否只读
          theme: 'snow', //主题 snow/bubble
          syntax: true, //语法检测
        },
        option: [{
          value: '选项1',
          label: 'A'
        }, {
          value: '选项2',
          label: 'B'
        },{
          value: '选项1',
          label: 'C'
        }, {
          value: '选项2',
          label: 'D'
        }],
        options: [{
          value: '选项1',
          label: '正常'
        }, {
          value: '选项2',
          label: '关闭'
        }],
        rules: {
          bankTrouble: [
            {required: true, message: '请输入主题内容', trigger: 'blur'},
            {min: 3, max: 250, message: '长度在 3 到 250 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    created:function() {
      this.user = JSON.parse(sessionStorage.getItem('user'));
      this.initData(this.states, this.search, this.currPage, this.pageSize);
    },
    methods: {
      initData(states, search, currPage, pageSize) {
        this.$axios.get("http://localhost:8088/hou/bank-page",
          {params: {states: states, search: search, currPage: currPage, pageSize: pageSize}}
        ).then(v => {
          this.tableData = v.data.rows;
          this.totalSize = v.data.total;
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      changePage(currPage) {
        this.initData(this.states, this.search, currPage, this.pageSize);
      },
      changeState() {
        this.initData(this.states, this.search, this.currPage, this.pageSize);
      },
      searchPage() {
        this.initData(this.states, this.search, this.currPage, this.pageSize);
      },
      sizeChange (pageSize) { //改变页大小
        this.pageSize = pageSize;
        this.initData(this.states, this.search, 1, pageSize);
      },
      reset(){//重置
        this.states = '';
        this.search = '';
        this.initData(this.states, this.search, this.currPage, this.pageSize);
      },
      // 失去焦点
      onEditorBlur(editor) {},
      // 获得焦点
      onEditorFocus(editor) {},
      // 开始
      onEditorReady(editor) {},
      // 值发生变化
      onEditorChange(editor) {
        this.content = editor.html;
        console.log(editor);
      },
      addBank(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.warehouse.empByEmployeesId.empByEmployeesId = this.user.employeesId;
            this.$axios.post("http://localhost:8088/hou/save-bank", {
              bankId: this.warehouse.bankId,
              bankTrouble: this.warehouse.bankTrouble,
              bankAnswer: this.content,
              bankTips: this.warehouse.bankTips,
              bankAuthor: this.warehouse.bankAuthor,
              bankDate: this.warehouse.bankDate,
              bankClass: this.warehouse.bankClass,
              bankState: this.warehouse.bankState,
              bankTime: this.warehouse.bankTime,
              empByEmployeesId: this.warehouse.empByEmployeesId
            }).then(v => {
              this.$message.success("新增成功");
              this.dialogFormVisible = false;
              this.warehouse = {
                bankId:'',
                bankTrouble:'',
                bankAnswer:'',
                bankTips:'',
                bankDate:'',
                bankClass:'',
                bankState:'',
                bankTime:'',
                empByEmployeesId:{
                  employeesId:'',
                  empName:''
                }
              };
              this.content = '';
              this.initData(this.states, this.search, this.currPage, this.pageSize);
            }).catch(v => {
              alert("访问失败!" + v.data);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      update(bankId){
        this.$axios.get("http://localhost:8088/hou/update-bank",
          {params:{bankId:bankId}}
        ).then(v=>{
          this.dialogFormVisible = true;
          this.warehouse = v.data;
          this.content = v.data.bankAnswer;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      },
      del(bankId){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("http://localhost:8088/hou/delete-bank",
            {params:{bankId:bankId}}
          ).then(()=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新数据
            this.initData(this.states, this.search, this.currPage, this.pageSize);
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      clear() {
        this.dialogFormVisible = true;
        this.warehouse = {
          bankId:'',
          bankTrouble:'',
          bankAnswer:'',
          bankTips:'',
          bankDate:'',
          bankClass:'',
          bankState:'',
          bankTime:'',
          empByEmployeesId:{
            employeesId:'',
            empName:''
          }
        };
        this.content = '';
      }
    },
    computed: {
      editor() {
        return this.$refs.myTextEditor.quillEditor;
      }
    },
    filters: {
      formatTime(time) {
        if (time == null && time != '') {
          return 0;
        }else {
          return time;
        }
      }
    }
  }
</script>

<style scoped>
  .header{
    border: 0px solid white;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white;
  }
  .limit{
    margin-top:10px;
    margin-left:340px;
  }
  .editor {
    line-height: normal !important;
    height:400px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }
</style>
